<!--
 * @Author: jiu yin
 * @Date: 2023-03-30 15:31:35
 * @LastEditTime: 2023-05-17 17:39:46
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \init-admin\src\views\home\index.vue
 * jiu
-->
<template>
    <div>
        <div class="box1">尼玛</div>
        <p>国际化   {{ $t('message.hello') }}</p>
        <p>国际化   {{ $t('message.time') }}</p>
        <Form :formDatas="hourConfig" :formList="formListOut" labelWidth="162px" onSubmits="保存"
            @onSubmit="onSubmitsTutorConfig"></Form>

        <Table :showSortIndex="{ show: true, lable: '序号' }" ref="TableList" :column="column" :loadData="loadData"
            :expand="true" headHight="200px" :selection="true" @checkbox="checkboxArr">
            <template #expand="{ row }">
                <div>尼玛比</div>
                <div>{{ row }}</div>
            </template>
            <template #effectiveTime="{ scope }">
                <div>
                    我说{{ scope.time }}
                </div>
            </template>

        </Table>
        <Form :formDatas="hourConfig" :formList="formListOut" labelWidth="162px" onSubmits="保存"
            @onSubmit="onSubmitsTutorConfig"></Form>
        <input type="file" id="my-file-input" />
    </div>
</template>
    
<script setup name="/">
import { reactive, toRefs, ref, computed, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue";
import { useCounterStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import Form from '@/components/Form';
import Table from "@/components/Table";
import { switchIsShow, isShow } from "@/utils"

{
    //mutation微任务
    mutationFn(() => { console.log("我是mutationFn微任务") })
    function mutationFn(fn) {
        let ob = new MutationObserver(fn)
        let text = document.createTextNode("0")
        ob.observe(text, { characterData: true })
        text.data = 1
    }
}
{
    //promise微任务
    asyncFn(() => { console.log("我是promise微任务"); })
    function asyncFn(fn) {
        return Promise.resolve().then(fn)
    }
}

console.log("测试微任务是否在之后");
const userStore = useCounterStore()
let hourConfig = reactive({})
const onSubmitsTutorConfig = (e) => {
    console.log(e, "表单数据");
}
let formListOut = reactive([
    {
        label: "会员卡剩余价值", code: "surplusValue", required: true, labelWidth: "162px", change(val, item, formData, formList) {
            formList.find((item) => item.code == 'aaaaaa').display = true
            formData.aaaaaa = ""
            console.log(val);
        }
    },
    {
        label: "费率", code: "rate", placeholder: "名字或手机号或卡号",
        change(val, item, formData, formList) {
            formList.find((item) => item.code == 'aaaaaa').display = false
            console.log(val);
        }
    },
    { label: "手续费", code: "commission", suffix: "元" },
    { label: "实际退款金额", code: "payMoney", suffix: "元" },
    {
        el: "date", label: "退卡日期", code: "date",
        width: "162px", format: "YYYY-MM-DD HH:mm:ss"
    },
    {
        el: "textarea", label: "备注", code: "remark",
        width: "260px"
    },
    {
        el: "radio",
        label: "卡属性",
        code: "cardType",
        //   disabled: true,
        slotName: "relationList",
        radios: [
            { name: "主卡", id: 1 },
            { name: "副卡", id: 2 },
        ],
    },
    {
        el: "select",
        label: "状态",
        code: "status",
        // labelWidth: "72px",
        options: [
            { id: 0, name: "待确认" },
            { id: 10, name: "待付款" },
            { id: 20, name: "已完成" },
            { id: -10, name: "未通过" },
            { id: -20, name: "已取消" },
            { id: -30, name: "已作废" },
        ],
    },
    {
        label: "尼玛",
        code: "aaaaaa",
        // display:true
    },
    {
        el: "select",
        label: "销售",
        code: "salesmanId",
        //   optionsFn: salesList,
        //   params: { status: 1 },
        filterable: true,

    },
    {
        el: "switch",
        label: "销售",
        code: "salesmanIdw",

    },

    {
        el: "checkbox",
        label: "销售",
        code: "salesmanIdb",
        checkboxArr: [],
        checkboxs: [
            { name: "主卡", id: "尼玛" },
            { name: "副卡", id: 2 },],
        slotName: "relationList",
    },
])
const { doubleCount } = storeToRefs(userStore)//结构使用
const { increment } = userStore

onMounted(() => {
    console.log("第一次");

    {
        //FileReader 可以获取文件流 readAsArrayBuffer  readAsDataURL：base64 的url；readAsText 文本流
        const fileInput = document.getElementById('my-file-input')
        fileInput.addEventListener('change', event => {
            const file = event.target.files[0]

            let size = file.size;
            chunk(file, 1000)//切片
            const reader = new FileReader()
            reader.addEventListener('load', event => {
                console.log('File contents:', event)
            })
            reader.readAsArrayBuffer(file)
        })

        function chunk(file, fileSize) {
            let size = file.size;
            let copies = 100 //份数
            let sizeTemp = size / copies //每份大小
            if (sizeTemp > 3000) {
                copies = size / fileSize
                sizeTemp = size / copies
            }
            let arr = []
            let start, end = 0

            for (let index = 1; index <= copies; index++) {
                end += sizeTemp
                let chunk = file.slice(start, end)
                arr.push(chunk)
                start = end
            }
            console.log(arr);
            return arr
        }


    }
})

let column = reactive([
    { prop: "memberName", label: "会员名称", width: 180 },
    { prop: "contact", label: "会员手机号", },
    { prop: "memberCouponCode", label: "优惠券ID", width: 80 },
    { prop: "couponName", label: "优惠券名称", width: 120 },
    { prop: "amount", label: "优惠面额" },
    {
        prop: "courseType",
        label: "获取渠道",
        html: (val) => "你麻"
    },
    {
        prop: "effectiveTime",
        label: "生效时间",
        render: true,//定义插槽 名字effectiveTime
    },
    {
        prop: "expirationTime",
        label: "到期时间",
        switch: true,
        value: [true, false]
    },
    {
        prop: "status", label: "状态",
        html: (val) => isShow(val.status == -1, ["已退回", "已使用"]),
    },
    {
        prop: "type", label: "消费类型",

    },

    {
        prop: "img",
        label: "图片",
        img: true,
    },
    {
        prop: "time",
        label: "操作",
        // fixed:"left",
        actives: [
            {
                name: "删除",
                method: (row) => {
                    console.log(row);
                }
            }
        ]
    }
])


let loadData = reactive([
    { memberName: "什么情况", contact: "123456789", memberCouponCode: "123456789", couponName: "什么情况", amount: "123456789", courseType: "什么情况", effectiveTime: "123456789", expirationTime: false, status: "123456789", type: "什么情况", time: "123456789", img: "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500", id: 1 },
    { memberName: "什么情况", contact: "123456789", memberCouponCode: "123456789", couponName: "什么情况", amount: "123456789", courseType: "什么情况", effectiveTime: "123456789", expirationTime: false, status: "123456789", type: "什么情况", time: "123456789", img: "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500", id: 2 },
])
const checkboxArr = (arr) => {
    console.log(arr);
}
onBeforeUnmount(() => {
    console.log("卸载之前");
})
onActivated(() => {
    console.log('我是缓存之前');
})
onDeactivated(() => {
    console.log('我是缓存之后');
})
</script>

<style scoped lang="scss">
.box1 {
    width: 100px;
    height: auto;
    border: 1px solid red;
    resize: both;
    overflow: auto;
}

.dot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    z-index: 999;
}
</style>
    